<template>
  <!-- kpl分析 -->
  <div class="global-topList">
    <div class="top_wrap pt-16">
      <div
        v-for="(item, _index) in tabList"
        :key="_index"
        class="tab_item"
        :class="type === item.index ? 'active_tab_item' : ''"
        @click="chooseTab(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 业绩看板 -->
    <results v-if="type === 1"></results>
    <!-- 销售趋势 -->
    <sales v-if="type === 2"></sales>
    <!-- 商品分析 -->
    <goods v-if="type === 3"></goods>
    <!-- 会员分析 -->
    <member v-if="type === 4"></member>
  </div>
</template>

<script>
import {
  commodityAnalysis,
  memberAnalysis,
  shopOperation
} from '@/request/store/K_KPIAnalysis'

import results from './childComp/results.vue'
import sales from './childComp/sales.vue'
import goods from './childComp/goods.vue'
import member from './childComp/member.vue'
export default {
  name: 'K_KPIAnalysis',
  components: { goods, member, sales, results },
  data() {
    return {
      tabList: [
        {
          index: 1,
          name: '业绩看板',
          active: true
        },
        {
          index: 2,
          name: '销售趋势',
          active: true
        },
        {
          index: 3,
          name: '商品分析',
          active: true
        },
        {
          index: 4,
          name: '会员分析',
          active: true
        }
      ],
      type: 1
    }
  },
  created() {
    // this.shopOperation()
    // this.commodityAnalysis()
    // this.memberAnalysis()
  },
  methods: {
    // 门店运营评估表
    async shopOperation() {
      const { data } = await shopOperation()
      // console.log(data, '门店运营评估表')
    },
    // 商品分析
    async commodityAnalysis() {
      const data = await commodityAnalysis()
      // console.log(data, '商品分析')
      // if (data && data.code === 200) {
      //   console.log(data)
      // }
    },
    // 会员分析
    async memberAnalysis() {
      const { data } = await memberAnalysis()
      // console.log(data, '商品分析')
    },
    chooseTab(e) {
      this.type = e.index
    }
  }
}
</script>

<style lang="less" scoped>
.top_wrap {
  // width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  // border-bottom-width: 90%;
  border-bottom: 2px solid #f6f6f6;
  .tab_item {
    width: 80px;
    margin: 0 30px;
    text-align: center;
    cursor: pointer;
  }
  .active_tab_item {
    color: #017aff;
    border-bottom: 2px solid #017aff;
  }
}
</style>
